<template>
  <div class="mod-user">
    <avue-crud
      ref="crudRef"
      :page="page"
      :data="dataList.orderList"
      :option="tableOption"
      @search-change="onSearch"
      @on-load="getVipLevel3User"
    >
      <template #vipLevel3User-search>
        <el-select v-model="queryParameter.uid" placeholder="请选择分部" width="30px">
          <el-option
            v-for="item in vipLevel3User"
            :key="item.userId"
            :label="item.nickName"
            :value="item.userId"
          >
          </el-option>
        </el-select>
        　　　　</template
      >

      <template #dataRange-search>
        <el-date-picker
          v-model="dateRange"
          type="datetimerange"
          range-separator="至"
          value-format="YYYY-MM-DD HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
        　　　　</template
      >

      <template #menu-left>
        <span class="statistics">下单商品数:{{dataList.orderQuantity}}</span>
        <span class="statistics">下单商品金额:{{dataList.orderMoney}}</span>
        <span class="statistics">退款商品数:{{dataList.refundQuantity}}</span>
        <span class="statistics">退款商品金额:{{dataList.refundMoney}}</span>
        <span class="statistics">奖励金额:{{dataList.rewardMoney}}</span>
      </template>

      <template #menu-right="{size}">
      <el-button type="primary"
                 icon="el-icon-download"
                 circle
                 :size="size" @click="exportVipLevel3UserPerformance"></el-button>
      </template>

      <!--<template #pic="scope">
        <span v-if="scope.row.pic" class="avue-crud__img">
          <el-icon><Document /></el-icon>
        </span>
        <span v-else>-</span>
      </template>-->

      <template #status="scope">
        <el-tag v-if="scope.row.status === 1"> 待付款 </el-tag>
        <el-tag v-else-if="scope.row.status === 2"> 待发货 </el-tag>
        <el-tag v-else-if="scope.row.status === 3"> 待收货 </el-tag>
        <el-tag v-else-if="scope.row.status === 4"> 待评价 </el-tag>
        <el-tag v-else-if="scope.row.status === 5"> 成功 </el-tag>
        <el-tag v-else-if="scope.row.status === 6"> 失败 </el-tag>
      </template>

      <!--<template #menu="scope"> </template>-->
    </avue-crud>
  </div>
</template>

<script setup>
import { isAuth } from "@/utils";
import { tableOption } from "@/crud/finance/branchOrderStatistics.js";

const dataList = reactive({
  orderList:[],
  orderMoney:"",
  orderQuantity:"",
  refundMoney:"",
  refundQuantity:"",
  rewardMoney:""
});
const dataListLoading = ref(false);
const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10, // 每页显示多少条
});
/**
 * 获取数据列表
 */
const getDataList = (pageParam, params, done) => {
  dataListLoading.value = true;
  http({
    url: http.adornUrl("/order/financeStatistics/getVipLevel3UserPerformance"),
    method: "get",
    params: http.adornParams(
      Object.assign(
        {
         startTime: dateRange.value === null ? null : dateRange.value[0], // 开始时间
         endTime: dateRange.value === null ? null : dateRange.value[1], // 结束时间
         vipLevel3User: queryParameter.uid
        },
        params
      )
    ),
  }).then(({ data }) => {
    dataListLoading.value = false;
    dataList.orderList = data.orderList;
    dataList.orderMoney = data.orderMoney;
    dataList.orderQuantity = data.orderQuantity;
    dataList.refundMoney = data.refundMoney;
    dataList.refundQuantity = data.refundQuantity;
    dataList.rewardMoney = data.rewardMoney;
    if (done) done();
  });
};

/**
 * 条件查询
 */
const onSearch = (params, done) => {
  getDataList(page, params, done);
};

const vipLevel3User = ref([]);
const getVipLevel3User = () => {
  http({
    url: http.adornUrl(`/admin/user/getAll`),
    method: "get",
    params: http.adornParams({
      vipLevel: 3,
    }),
  })
    .then(({ data }) => {
      vipLevel3User.value = data;
    })
    .catch(function (err) {});
};


const queryParameter = reactive({
  uid:""
});
const dateRange = ref([])


const exportVipLevel3UserPerformance = () => {
  http({
    url: http.adornUrl('/order/financeStatistics/exportVipLevel3UserPerformance'),
    method: 'get',
    params: http.adornParams({
      startTime: dateRange.value === null ? null : dateRange.value[0], // 开始时间
      endTime: dateRange.value === null ? null : dateRange.value[1], // 结束时间
      vipLevel3User: queryParameter.uid
    }),
    responseType: 'blob' // 解决文件下载乱码问题
  })
    .then(({ data }) => {
      const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
      const fileName = '分部业绩.xlsx'
      const elink = document.createElement('a')
      if ('download' in elink) { // 非IE下载
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
      } else { // IE10+下载
        navigator.msSaveBlob(blob, fileName)
      }
    })
}


</script>
<style scoped lang="scss">
  .statistics{
      margin-right:20px;
  }
</style>